import React from "react";
import { Box } from "@mui/material";
import { ALL_TYPES, MICRO_TYPES } from "./common";
import AdaptiveTitle from "./AdaptiveTitle";

export default function ContentMain({ data, refs }) {
  const curLeveltype = ALL_TYPES.find((type) => data && data[type]);
  const curLevelItems = data[curLeveltype] || [];

  return (
    <Box
      className="mainContent"
      sx={{
        width: "100%",
        paddingBottom: "20px",
      }}>
      {curLevelItems &&
        curLevelItems.map((item) => (
          <Box key={item._id} ref={refs[item._id]}>
            <div className="content" style={{ padding: "10px 20px" }}>
              {!MICRO_TYPES.includes(item.type) && (
                <AdaptiveTitle item={item} />
              )}
              <p
                style={{
                  fontSize: "16px",
                  width: "85%",
                  paddingLeft: "20px",
                  paddingBottom: "10px",
                  textIndent: "2em",
                }}>
                {item.revisionHistory && item.revisionHistory[0].text}
              </p>
            </div>
            <ContentMain data={item} refs={refs} />
          </Box>
        ))}
    </Box>
  );
}
